<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>客户服务</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/iview@2.12.0/dist/styles/iview.css"> -->

    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src=${contextPath}/static/layer/layer.js></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>

    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/iview@2.12.0/dist/iview.min.js"></script>

    <style type="text/css">
        body {
            background-color: #0c2a52;
        }
        .zc-container {
            text-align: center;
        }
        .zc-title {

        }
        .col-left {
            text-align: left;
        }
        .col-center {
            text-align: center;
        }

        .zc-zb-box {
            overflow: hidden;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: baseline;
            -ms-flex-align: baseline;
            align-items: baseline;
            padding: 30px 5px 30px 5px;
        }
        .zc-zb-name {
            font-size: 15px;
            color: #dcdcdc;
            line-height: 16px;
        }
        .zc-zb-num {
            font-size: 37px;
            color: #fff;
            line-height: 48px;
            margin-left: 20px;
        }
        .zc-zb-pc {
            font-size: 25px;
            color: green;
            line-height: 35px;
            margin-left: 15px;
        }
        .zc-zb-change {
            margin-left: 10px;
        }
        .zc-map {
        }
        .right-zb-box{

        }
        tr th {
            text-align: center;
            color: #00c9ff;
            font-size: 17px;
        }
        tr td {
            font-size: 15px;
        }
        .table-bordered>thead>tr>th, .table-bordered>thead>tr>td {
            border-bottom-width: 1px;
        }


        @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
            .masked{
                background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
                -webkit-background-size: 200% 100%;
                -webkit-animation: masked-animation 4s infinite linear;
            }
        }
        @-webkit-keyframes masked-animation {
            0%  { background-position: 0 0;}
            100% { background-position: -100% 0;}
        }
    </style>
</head>
<body>
<div class="container-fluid zc-container">
    <div class="row">
        <div class="col-sm-12 zc-title">
            <h1 style="color: #e2e2e2;">客户服务<small>客户订单数据</small></h1>
        </div>
    </div>
    <hr style="border-top: 1px solid #ccc;">
    <div class="row">
        <div class="col-sm-3 con-left" id="app">
            <div class="zc-zb-box">
                <div class="zc-zb-name">客户经理：</div>
                <div class="zc-zb-num masked">{{numData.emp}}</div>
            </div>
            <div class="zc-zb-box">
                <select class="form-control" v-model="selectEmp" style="color: #fff;background-color: #0c2a52">
                    <option value="">所有客户经理</option>
                    <option v-for="emp in emps" :value="emp.CODE">{{emp.NAME}}</option>
                </select>
            </div>
            <div class="zc-zb-box">
                <div class="zc-zb-name">客户总数：</div>
                <div class="zc-zb-num masked">{{numData.customer}}人</div>
            </div>
            <div class="zc-zb-box">
                <div class="zc-zb-name">标杆终端：</div>
                <div class="zc-zb-num masked">{{numData.biaoGan}}</div>
            </div>
            <div class="zc-zb-box">
                <div class="zc-zb-name">现代终端：</div>
                <div class="zc-zb-num masked">{{numData.xianDai}}</div>
            </div>
            <div class="zc-zb-box">
                <div class="zc-zb-name">信息采集点：</div>
                <div class="zc-zb-num masked">{{numData.xinXi}}</div>
            </div>
            <div class="zc-zb-box">
                <div class="zc-zb-name">事件营销点：</div>
                <div class="zc-zb-num masked">{{numData.shiJian}}</div>
            </div>
        </div>
        <div class="col-sm-6 col-center">
            <div class="zc-map" id="zc-map"></div>
        </div>
        <div class="col-sm-3">
            <div class="table-responsive">
                <h4 style="color: #fff9ec">同比销量库存</h4>
                <table class="table table-bordered" style="color: #a5eaa9;">
                    <thead>
                    </thead>
                    <tbody>
                    <tr>
                        <th>应订户数</th>
                        <th>已订户数</th>
                        <th>未定户数</th>
                        <th>订货率</th>
                    </tr>
                    <tr>
                        <td id="shouldOrderUsers"></td>
                        <td id="alreadyOrderUsers"></td>
                        <td id="notOrderUsers"></td>
                        <td id="ordrs"></td>
                    </tr>
                    <tr>
                        <th>应结户数</th>
                        <th>已结户数</th>
                        <th>未结户数</th>
                        <th>结算率</th>
                    </tr>
                    <tr>
                        <td id="shouldKnotUsers"></td>
                        <td id="alreadyKnotUsers"></td>
                        <td id="notKnotUsers"></td>
                        <td id="accountingRate"></td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="table-responsive">
                <h4 style="color: #fff9ec">信息采集</h4>
                <table class="table table-bordered" style="color: #a5eaa9;">
                    <thead>
                    </thead>
                    <tbody>
                    <tr>
                        <th>扫码户数</th>
                        <td id="scanUsers"></td>
                    </tr>
                    <tr>
                        <th>数量</th>
                        <td id="number"></td>
                    </tr>
                    <tr>
                        <th>金额</th>
                        <td id="scanAt"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ec3688cc2547017ad39dd55153d18b85"></script>
<script>

    // 高度设置
    $('#zc-map').height($('#zc-map').width()*1);
    {
        var total = $(document).height();
        $('.table-responsive').height(total*0.4);
    }


    //初始化地图
    var map = new AMap.Map('zc-map',{
        resizeEnable: true,
        zoom: 12,
        mapStyle: 'amap://styles/grey',
        center: [116.39,39.9]//new AMap.LngLat(116.39,39.9)
    });
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'], function() {
        toolBar = new AMap.ToolBar();  //工具条
        scale = new AMap.Scale();    //比例尺
        map.addControl(toolBar);
        map.addControl(scale);
    });
    var infoWindow = new AMap.InfoWindow();

    //初始化统计图
    //var myChart =  echarts.init($("#main")[0]);
    var constantly = [];
    //vue实例
    new Vue({
        el: '#app',
        data: {
            selectEmp: '1052020200001024',
            emps:[],
            markerList : [],
            numData:{
                emp:0,
                customer: 0,
                biaoGan : 0,
                xianDai: 0,
                xinXi: 0,
                shiJian: 0
            }
        },
        mounted: function () {
            this.getInitData();
            this.getData();
        },
        watch : {
            'selectEmp': function(newValue) {
                this.getData();
            },
        },
        methods: {
            getInitData : function () {
                var vm = this;
                $.ajax({
                    url: '${contextPath}/shop/getCustomerserviceData',
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            var emps = data.data.emps;
                            console.log(emps.length)

                            // emps = [
                            //     {name:"钟山区汪家寨客户经理[叶剑]",code:"1052020101000030"},
                            //     {name:"钟山区汪家寨客户经理[段成玉]",code:"1052020400022010"},
                            //     {name:"钟山区汪家寨客户经理[管毓军]",code:"1052020101000030"},
                            //     {name:"钟山区荷城客户经理 [毛晓霖]",code:"1052020100014030"},
                            //     {name:"钟山区荷城客户经理[周敏]",code:"1052020100014010"},
                            //     {name:"钟山区荷城客户经理[罗新]",code:"1052020100014040"},
                            //     {name:"钟山区荷城客户经理[马丹]",code:"1052020100014040"},
                            //     {name:"钟山区荷城客户经理[马煜]",code:"1052020100014040"},
                            //     {name:"钟山区荷城客户经理[黄美英]",code:"1052020100075020"},
                            //     {name:"钟山区黄土坡客户经理[刘倩]",code:"1052020100014030"},
                            //     {name:"钟山区黄土坡客户经理[张广洋]",code:"1052020101000050"},
                            //     {name:"钟山区黄土坡客户经理[戴虹]",code:"1052020101000050"},
                            //     {name:"钟山区黄土坡客户经理[王兴岚]",code:"1052020300015020"},
                            //     {name:"钟山区黄土坡客户经理[胡娴]",code:"1052020100014040"},
                            //     {name:"钟山区黄土坡客户经理[郭窕]",code:"1052020101000070"},
                            //     {name:"钟山区黄土坡客户经理[黄晋嘉]",code:"1052020100014000"}
                            // ]
                            vm.numData.emp = emps.length;
                            vm.emps = emps;
                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.msg("网络错误")
                    }
                })
            },
            getData: function () {
                console.log(vm.selectEmp);
                var vm = this;
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/shop/getCustShopData',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap: {
                            slsmanCode:vm.selectEmp
                        }
                    },
                    success: function (data) {
                        layer.closeAll('loading');
                        if (data.success) {
                            console.log(data.data);
                            constantly = data.data.constantly;
                            var carLocation = data.data.carLastLocation;
                            var yearData = data.data.yearData;

                            vm.updateNumData(constantly);
                           // carLocation = [{notKnotUsers:'3232323',CUST_NAME:'dada',SHOP_ID:123,SHOP_NAME:'ddd',IS_EXP:'1',ADDRESS:'贵州省贵阳市白云区烟山红工大路',LONGITUDE:'106.68843',LATITUDE:'26.54832'}]
                           // vm.updateMap(carLocation);



                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg("网络错误")
                    }
                })
            },
            updateNumData : function (index) {
                var data = {};
                console.log(constantly.length);
                for (var i = 0; i < constantly.length; i++){
                    if ( constantly[i].CODE == this.selectEmp) {
                       data = constantly[i];
                       break;
                    }
                }
                console.log(data);

                // this.numData.emp = data.emp ? data.emp : '0';
                this.numData.customer = data.CUSTOMER ? data.CUSTOMER : '0';
                this.numData.biaoGan = data.biaoGan ? data.biaoGan : '0';
                this.numData.xianDai = data.xianDai ? data.xianDai : '0';
                this.numData.xinXi = data.XINXI ? data.XINXI : '0';
                this.numData.shiJian = data.shiJian ? data.shiJian : '0';


                $('#shouldOrderUsers').html(data.shouldOrderUsers ? data.shouldOrderUsers: '0');
                $('#alreadyOrderUsers').html(data.alreadyOrderUsers ? data.alreadyOrderUsers: '0');
                $('#notOrderUsers').html(data.shouldOrderUsers - data.alreadyOrderUsers ? data.shouldOrderUsers - data.alreadyOrderUsers : '0');
                var ordrs = ((data.alreadyOrderUsers / data.shouldOrderUsers) * 100).toFixed(2);
//                console.log(ORDRS);
                $('#ordrs').html(ordrs + '%');


                $('#shouldKnotUsers').html(data.alreadyOrderUsers ? data.alreadyOrderUsers: '0');
                $('#alreadyKnotUsers').html(data.alreadyKnotUsers ? data.alreadyKnotUsers: '0');
                $('#notKnotUsers').html(data.alreadyOrderUsers  -  data.alreadyKnotUsers);
                var accountingRate = ((data.alreadyKnotUsers / data.alreadyOrderUsers) * 100).toFixed(2);
                $('#accountingRate').html(accountingRate + '%');
                
                $('#scanUsers').html(data.shouldOrderUsers ? data.shouldOrderUsers: '0');
                $('#number').html(data.QUANTITY ? data.QUANTITY: '0');
                $('#scanAt').html(data.SCANAT ? data.SCANAT: '0');


                this.updateMap(data.markeInfo);  //生成环境注释或删除
            },
            updateMap : function (dataArray) {
//                console.log(dataArray[0].LONGITUDE);
                map.remove(this.markerList);
                map.clearInfoWindow();
                this.markerList = [];
                if (!dataArray || dataArray.length ==0) {
                    return;
                }
                map.setCenter(new AMap.LngLat(dataArray[0].LONGITUDE,dataArray[0].LATITUDE));
                var markerList=[];
                for (var index in dataArray) {
                    var markeInfo = dataArray[index];
                    console.log("markeInfo: "+markeInfo.IS_EXP);
                    var image = '${contextPath}/static/image/marker.png';//24px*24px
                    if (markeInfo.IS_EXP == '1') {
                        image = '${contextPath}/static/image/exp.png';
                    }
                    var icon = new AMap.Icon({
                        image : image,//24px*24px
                        //icon可缺省，缺省时为默认的蓝色水滴图标，
                        size : new AMap.Size(50,38)
                    });
                    var marker = new AMap.Marker({
                        icon : icon,//24px*24px
                        position : [markeInfo.LONGITUDE,markeInfo.LATITUDE],
                        title:markeInfo.CUST_CODE,
                        offset : new AMap.Pixel(-12,-12),
                        //animation:'AMAP_ANIMATION_BOUNCE',
                        map : map
                    });
                    marker.content = '客户名称：'+ (markeInfo.CUST_NAME ? markeInfo.CUST_NAME : '')  +
                        '<br>客户号：'+ markeInfo.CUST_CODE +
                        '<br>店铺名称：'+ markeInfo.SHOP_NAME+
                        '<br>店铺Id：'+ markeInfo.SHOP_ID +
                        '<br>是否试点：'+ (markeInfo.IS_EXP == '1' ? '是':'否') +
                        '<br>店铺地址：'+ markeInfo.ADDRESS
                    ;
                    AMap.event.addListener(marker, 'click', function(e) {
                        infoWindow.setContent(e.target.content);
                        infoWindow.open(map, e.target.getPosition());
                    });
                    markerList.push(marker);
                }
                this.markerList = markerList;
            }

//            updateMain1Data: function (main1Data) {
//                //if (!main1Data) return;
//
//                /**
//                 * 为了解决数据为空的情况，采用如此方法解决
//                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
//                 *
//                 * */
//                var months = ['1','2','3','4','5','6','7','8','9','10','11','12'];
//                var quantity17 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
//                var quantity18 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
//                for (var index in main1Data) {
//                    var data = main1Data[index];
//                    var year = data.DELIVER_DATE.substring(0, 4);
//                    var month = data.DELIVER_DATE.substring(4);
//                    var idx;
//                    switch (month) {
//                        case '01':
//                            idx = 0;
//                            break;
//                        case '02':
//                            idx = 1;
//                            break;
//                        case '03':
//                            idx = 2;
//                            break;
//                        case '04':
//                            idx = 3;
//                            break;
//                        case '05':
//                            idx = 4;
//                            break;
//                        case '06':
//                            idx = 5;
//                            break;
//                        case '07':
//                            idx = 6;
//                            break;
//                        case '08':
//                            idx = 7;
//                            break;
//                        case '09':
//                            idx = 8;
//                            break;
//                        case '10':
//                            idx = 9;
//                            break;
//                        case '11':
//                            idx = 10;
//                            break;
//                        case '12':
//                            idx = 11;
//                            break;
//                        default:
//                            ;
//                    }
//                    if (year == '2017') {
//                        quantity17[idx] = data.QUANTITY;
//                    } else if (year == '2018') {
//                        quantity18[idx] = data.QUANTITY;
//                    }
//
//                }
//                // 指定图表的配置项和数据
//                var option = {
//                    color: ['#6245f7', '#35b1d2'],
//                    title: {
//                        text: '销量统计',
//                        textStyle: {
//                            color:'#909090'
//                        }
//                    },
//                    tooltip: {
//                        trigger: 'axis'
//                    },
//                    legend: {
//                        textStyle: {
//                            color:'#c5c5c5'
//                        },
//                        data:['2017','2018']
//                    },
//                    grid: {
//                        left: '3%',
//                        right: '4%',
//                        bottom: '3%',
//                        containLabel: true
//                    },
//                    toolbox: {
//                        feature: {
//                            saveAsImage: {}
//                        }
//                    },
//                    xAxis: {
//                        type: 'category',
//                        boundaryGap: false,
//                        axisLine: {
//                            lineStyle: {
//                                color: '#0177d4'
//                            }
//                        },
//                        axisLabel: {
//                            color: '#fff',
//                            fontSize: 14
//                        },
//                        data: months
//                    },
//                    yAxis: {
//                        name: "（条）",
//                        nameTextStyle: {
//                            color: '#77969a',
//                            fontSize: 16
//                        },
//                        axisLine: {
//                            lineStyle: {
//                                color: '#0177d4'
//                            }
//                        },
//                        axisLabel: {
//                            color: '#fff',
//                            fontSize: 16
//                        },
//                        splitLine: {
//                            show:false,
//                            lineStyle: {
//                                color: '#0177d4'
//                            }
//                        },
//                        type: 'value'
//                    },
//                    series: [
//                        {
//                            name:'2017',
//                            type:'line',
//                            data:quantity17
//                        },
//                        {
//                            name:'2018',
//                            type:'line',
//                            data:quantity18
//                        },
//                    ]
//                };
//                // 使用刚指定的配置项和数据显示图表。
//                myChart.setOption(option);
//
//            },
//            managerAmt: function () {
//                var payAmt = this.numData.amt;
//                if (!payAmt) {
//                    return '0元';
//                }
//                if (payAmt > 100000000) {
//                    return (payAmt / 100000000).toFixed(2) + "亿";
//                }
//                if (payAmt > 10000) {
//                    return (payAmt / 10000).toFixed(2) + "万";
//                }
//                return payAmt
//            }
        }
    });
</script>
</body>
</html>